<script setup>
const props = defineProps({
  folder: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(['rename', 'delete']);

function handleRename() {
  emit('rename', props.folder.id);
}

function handleDelete() {
  emit('delete', props.folder.id);
}
</script>

<template>
  <div class="folder-header">
    <h4>{{ folder.name }}</h4>
    <div class="folder-actions">
      <button class="folder-action-btn" @click="handleRename">
        <span>✏️</span> 重命名
      </button>
      <button class="folder-action-btn delete" @click="handleDelete">
        <span>🗑️</span> 删除
      </button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.folder-header {
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;

  h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
  }

  .folder-actions {
    display: flex;
    gap: 8px;
  }

  .folder-action-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;

    &:hover {
      background-color: rgba(255, 255, 255, 0.05);
    }

    &.delete:hover {
      background-color: rgba(255, 73, 73, 0.2);
      border-color: rgba(255, 73, 73, 0.5);
      color: #ff4949;
    }
  }
}
</style>